<template>
	<div style="padding: 15px" v-if="idshow">
		<div
			style="background-color: #fff; padding: 10px; margin-bottom: 15px; font-size: 700; cursor: pointer"
			@click="router.go(-1)"
		>
			<el-icon><ArrowLeftBold /></el-icon><span>返回</span>
		</div>
		<div style="margin-top: 15px; margin-bottom: 15px">
			<span style="font-size: 14px">共{{ tableData.length }}个客户</span>
			<span style="color: rgba(0, 0, 0, 0.45); margin-left: 5px; font-size: 13px">已添加1个客户</span>
			<span style="float: right">
				<span>添加状态：</span>
				<span>
					<el-select v-model="form.status" class="m-2" placeholder="请选择状态" @change="userBatchDetailapi()">
						<el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id" />
					</el-select>
				</span>
				<span style="margin-left: 5px">
					<el-input
						v-model="form.phone"
						class="w-50 m-2"
						placeholder="搜索电话"
						:suffix-icon="Search"
						style="width: 200px"
						@keyup.enter.native="userBatchDetailapi()"
					/>
				</span>
			</span>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="phone" label="客户电话" />
				<el-table-column prop="remarks" label="备注名" />
				<el-table-column prop="address" label="员工">
					<template #default="scope">
						<el-tag
							><el-icon><User /></el-icon>{{ scope.row.staff_name }}</el-tag
						>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="添加状态">
					<template #default="scope">
						{{
							scope.row.add_status == 0
								? '未添加'
								: scope.row.add_status == 1
								? '已添加'
								: scope.row.add_status == 2
								? '待分配'
								: '待通过'
						}}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template #default="scope">
						<el-button type="primary" text v-if="scope.row.add_status != 1" @click="remind(scope.row)"
							>提醒添加</el-button
						>

						<el-button type="primary" text @click="recorddetails(scope.row.customer_id)" v-else>详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<Detail  ref="details" @diaUpdate="idshow=true"  />
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Calendar, Search } from '@element-plus/icons-vue'
import { userBatchDetail, userBatchDelMissions } from '@/api'
import Detail from '../customer/detail/index.vue'
const Route = useRoute()
const router = useRouter()
const details = ref()
const options = ref([
	{
		id: 0,
		value: '全部'
	},
	{
		id: 1,
		value: '未添加'
	},
	{
		id: 2,
		value: '已添加'
	},
	{
		id: 3,
		value: '待分配'
	},
	{
		id: 4,
		value: '待通过'
	}
])
const form = reactive({
	phone: '',
	status: 0,
	id: Route.query.id
})
const tableData = ref([
	{
		date: '2016-05-03',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	}
])
const idshow= ref(true)
const recorddetails = (val) => {
	idshow.value=false
	details.value.show(val)
}
const userBatchDetailapi = () => {
	userBatchDetail(form).then((res) => {
		tableData.value = res.data
	})
}
const remind = (val) => {
	ElMessageBox.confirm('是否确认提醒员工添加好友？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		userBatchDelMissions({ id: val.id }).then((res) => {
			ElMessage({
				message: '提醒成功',
				type: 'success'
			})
			userBatchDetailapi()
		})
	})
}
userBatchDetailapi()
</script>
